<!DOCTYPE html>
<title>Text queries on elements with collapsed whitespace</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg>
  <text transform="translate(0 20)">A B C</text>
  <text transform="translate(0 40)">A <tspan>B</tspan> C</text>
  <text transform="translate(0 60)">    A   B  C  </text>
  <text transform="translate(0 80)">    A <tspan>  B  C </tspan> </text>
  <text transform="translate(0 100)">  <tspan>  A   B </tspan> C  </text>
  <text transform="translate(0 120)">    A <tspan>  B </tspan> C  </text>
</svg>
<script>
setup(function() {
    window.textElements = document.getElementsByTagName('text');
    var referenceElement = textElements[0];
    window.reference = [];
    for (var i = 0; i < 5; ++i)
        reference.push(referenceElement.getExtentOfChar(i));
});

test(function() {
    for (var j = 1; j < textElements.length; ++j) {
        var element = textElements[j];
        assert_equals(element.getNumberOfChars(), 5, 'collapsed length');

        for (var i = 0; i < 5; ++i) {
            var extents = element.getExtentOfChar(i);
            for (var attr of ['x', 'y', 'width', 'height'])
                assert_approx_equals(extents[attr], reference[i][attr], 0.02, 'same extents as reference (' + attr + ')');
        }

        var queryPoint = element.ownerSVGElement.createSVGPoint();
        for (var i = 0; i < 5; ++i) {
            queryPoint.x = reference[i].x + reference[i].width / 2;
            queryPoint.y = reference[i].y + reference[i].height / 2;
            assert_equals(element.getCharNumAtPosition(queryPoint), i, 'at same position as reference');
        }
    }
});
</script>
